<template>
  <view class="container">
    <!-- 导航 -->
    <custom-nav isCustomBack @back="backLeft" shadow></custom-nav>

    <view class="content" v-if="curPage">
      <image :src="urlConf + 'common/banner.svg'" mode="heightFix" class="banner-img" v-if="curPage == 1"></image>

      <view class="register-title">
        {{pageConf?.title}}
        <text class="sub-title">({{curPage}}/6)</text>
      </view>

      <!-- 地区属性 -->
      <template v-if="curPage == 6">
        <custom-picker mode="region" :modelData="dataForm"></custom-picker>
        <view class="confirm-btn" @click="confirmFn"> <custom-btn>确定</custom-btn> </view>
      </template>

      <!-- 其他属性 -->
      <template v-else>
        <view class="register-con" v-for="(item, index) in pageConf.btnsConf" :key="index">
          <view class="register-label" v-if="item.label">
            {{item.label}}
          </view>
          <view class="register-btn" :class="isWrapClass(item.label)">
            <view class="check-item" :style="itemStyle(item.label)" v-for="(v, i) in item.list" :key="i" :class="v == checked ? 'active-item' : ''" @click="handleFn(v)">
              {{v}}{{pageConf.prop == 'gender' ? '孩' : ''}}
            </view>
          </view>
        </view>
      </template>
    </view>

    <!-- 弹窗提醒 -->
    <page-container :show="popupShow" @beforeleave="backLeft" :overlay="false"></page-container>
  </view>
</template>

<script setup>
import useStore from "@/store";
const { common, app, register } = useStore();

import { urlConf } from "@/config/resource";
import { pageConfig } from "./config";
import { setItem, getItem } from "@/utils/storage";
import { editUserDetail } from "@/api/my";

// 页面样式配置
const itemStyle = (label) => {
  const fn = (width, height, fontSize) => {
    return { width, height, fontSize, lineHeight: height };
  };
  return label ? fn("150rpx", "80rpx", "32rpx") : fn("610rpx", "140rpx", "36rpx");
};
const isWrapClass = (label) => {
  return label ? "btn-grid" : "";
};

// 页面data + methods
const backClickCount = ref(1);
const popupShow = ref(true);
const checked = ref(0);
const curPage = ref(0);
const btnLoading = ref(false);
const dataForm = reactive({});
const registerConf = computed(() => register.registerConf);
const pageConf = computed(() => {
  const conf = pageConfig(curPage.value);
  const yObj = registerConf.value[conf.prop];

  const ks = ["height", "year"];
  if (ks.includes(conf.prop)) {
    conf.btnsConf = [];
    for (const key in yObj) {
      const labels = {
        year: key.slice(-2) + "后",
        height: key + "+",
      };
      conf.btnsConf.push({
        label: labels[conf.prop],
        list: yObj[key],
      });
    }
    if (conf.prop == "year") conf.btnsConf.reverse();
  } else {
    if (conf.prop == "gender") {
      conf.btnsConf = [
        {
          list: ["男", "女"],
        },
      ];
    } else {
      conf.btnsConf = [
        {
          list: yObj,
        },
      ];
    }
  }

  return conf;
});
// 选择操作
const handleFn = (val) => {
  const { prop } = pageConf.value;
  checked.value = val;
  dataForm[prop] = val;

  if (prop == "gender") {
    const gObj = {
      女: "男",
      男: "女",
    };
    setItem("user_info", { gender: gObj[val] });
  }

  setTimeout(() => {
    curPage.value++;
    btnLoading.value = false;
  }, 100);
};

// 页面返回事件
const backLeft = () => {
  // 初次点击返回 - 调起弹窗
  const s = getItem("initPromptStatus");
  if (s) {
    const data = {
      content: "填写子女资料，我们才能为您精准推荐同城对象哦!",
      btnText: "继续填写",
      handleFn: () => {
        common.updatePopupOpen(false, "prompt");
      },
    };
    setItem("initPromptStatus", false);
    common.updatePromptParams(data);
    common.updatePopupOpen(true, "prompt");
    return;
  }

  if (curPage.value == 1) {
    uni.navigateBack({ delta: 1 });
    return;
  }
  setTimeout(() => {
    curPage.value--;
    checked.value = dataForm[pageConf.value.prop];
  }, 100);
};

// 确定按钮
const confirmFn = () => {
  const [at_province, at_city] = dataForm.region.split(",");
  dataForm.at_province = at_province;
  dataForm.at_city = at_city;
  sendRequest();
};

// 调用接口
const sendRequest = (from) => {
  if (btnLoading.value) return;
  btnLoading.value = true;

  const user_info = JSON.stringify(dataForm);

  // 调用注册接口
  app
    .sureRegister(user_info)
    .then((res) => {
      editUserDetail({ user_info }).then((res) => {
        btnLoading.value = false;
        uni.navigateTo({ url: "/subPages/register/contact" });
      });
    })
    .catch((err) => {
      btnLoading.value = false;
    });
};

onLoad((options) => {
  register.getAttrConfig();
  if (options?.gender) {
    dataForm.gender = options.gender;
    curPage.value = 2;
    return;
  }
  curPage.value = 1;
});

onUnload(() => {
  setItem("lastPage", "subPages/register/index");
});
</script>

<style lang="scss" scoped>
@import "@/styles/global.scss";
.content {
  background: #fff;
}
.banner-img {
  height: 280rpx;
  margin-top: 40rpx;
  margin-bottom: -50rpx;
}
.register-title {
  padding: 80rpx 50rpx 0;
  @include registerTitle;
  .sub-title {
    @include registerSubTitle;
  }
}
.register-con {
  padding: 0 50rpx;
  padding-bottom: 60rpx;
}
.register-label {
  font-size: 48rpx;
  color: $uni-text-color;
  margin-bottom: 40rpx;
}
.check-item {
  @include registerItem;
  border-radius: 140rpx;
  line-height: 140rpx;
  text-align: center;
  margin: 0 auto;
}

.active-item {
  @include activeItem;
}
.register-btn {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20rpx;
}
.btn-grid {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 16rpx;
}

.confirm-btn {
  width: 610rpx;
  height: 120rpx;
  font-size: 36rpx;
  color: #fff;
  margin: 0 auto;
  line-height: 120rpx;
  background: linear-gradient(180deg, rgba(241, 55, 64, 0.9) 0%, #f13740 100%);
  box-shadow: 0rpx 20rpx 40rpx 0rpx rgba(241, 55, 64, 0.25);
  border-radius: 120rpx;
}

.popup-content {
  padding: 60rpx 40rpx;
  background-color: #fff;
  border-radius: 30rpx;
  width: 80%;
  // margin: ;
  text-align: center;
  .p-title {
    color: $uni-title-color;
    font-size: 44rpx;
    padding: 0 0 40rpx;
    font-weight: bold;
  }
  .p-text {
    color: #666;
    font-size: 36rpx;
    font-weight: 500;
    line-height: 60rpx;
  }

  .p-btn {
    width: 400rpx;
    height: 120rpx;
    margin: 40rpx auto 0;
    font-size: 40rpx;
    color: #fff;
    background: linear-gradient(180deg, rgba(241, 55, 64, 0.9) 0%, #f13740 100%);
    box-shadow: 0rpx 20rpx 40rpx 0rpx rgba(241, 55, 64, 0.25);
    border-radius: 120rpx;
    line-height: 120rpx;
  }
}
</style>